<template>
  <div>
    <h1>欢迎光临</h1>
    <table>
      <tr>
        <td>苹果{{ price }}元/斤,折扣{{ discount }}折</td>
      </tr>
      <tr>
        <td>
          请输入你要购买的斤数:<input type="text" v-model.number="weight" />
        </td>
      </tr>
      <tr>
        <td><button @click="payMoney">结账买单~</button></td>
      </tr>
      <tr>
        <td>
          结账单:总价:{{ total }}元,折扣后:{{ discountTotal }}元,省了:{{
            rest
          }}元
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 10,
      discount: 8,
      weight: '',
      total: '',
      discountTotal: '',
      rest: '',
    }
  },
  methods: {
    payMoney() {
      this.total = this.price * this.weight
      this.discountTotal = this.price * this.discount * 0.1 * this.weight
      this.rest = this.total - this.discountTotal

      // console.log(this.total)
    },
  },
}
</script>

<style>
div {
  text-align: center;
}
h1 {
  margin-bottom: 30px;
}
table {
  margin: 0 auto;
  width: 800px;
  font-size: 24px;
  text-align: center;
  border: 1px solid #000;
  border-collapse: collapse;
}
tr,
td {
  border: 1px solid #000;
}
</style>
